<template>
  <div class="bill">
	<van-nav-bar title="账单" style="background-color: #42B983;"></van-nav-bar>
    <van-grid :column-num="2" class="grid">
        <van-grid-item v-for="item in grid" :key="item.id" @click="Jump(item.path)">
			<img :src="item.img_src" alt="">
			<span style="font-size: 25px;margin-top: 10px;">{{item.title}}</span>
		</van-grid-item>
    </van-grid>
	<div class="content">
		<van-tabs v-model="active">
		  <van-tab title="收入">
			  <div class="sr" v-for="(item,index) in shouru" :key="index">
				  <van-card
				    :price="item.price"
				    :desc="item.desc"
				    :title="item.title" class="shouru">
				  </van-card>
			  </div>
		  </van-tab>
		  <van-tab title="支出">
			  <div class="zc" v-for="(item,index) in zhichu" :key="index">
				  <van-card
				    :price="item.price"
				    :desc="item.desc"
				    :title="item.title"
				  	class="zhichu"
				  >
				  </van-card>
			  </div>
		  </van-tab>
		</van-tabs>
	</div>
  </div>
</template>
<script>
	export default{
		data(){
			return{
				active:1,
				zhichu:[
					{
						price:3,
						desc:"吃饭3元钱",
						title:"吃饭"
					},
					{
						price:2,
						desc:"买衣服2元钱",
						title:"买衣服"
					},
					{
						price:5,
						desc:"逛街5元钱",
						title:"逛街"
					}
				],
				shouru:[
					{
						price:3,
						desc:"抖音收入3元钱",
						title:"抖音收入"
					},
					{
						price:2,
						desc:"抖音收入2元钱",
						title:"抖音收入"
					},
					{
						price:5,
						desc:"抖音收入5元钱",
						title:"抖音收入"
					}
				],
				 grid:[
					  {id:1,path:"/income",title:"收入",img_src:require("../assets/shouru.png")},
					  {id:2,path:"/pay",title:"支出",img_src:require("../assets/zhichu.png")},
				  ]
			}
		},
		methods:{
			Jump(val){
				this.$router.push(val)
			}
		}
	}
</script>
<style scoped="scoped">
	.content{
		overflow-y: auto;
		width: 100%;
		height: 100%;
	}
	.sr{
		padding: 10px 10px;
	}
	.zc{
		padding: 10px 10px;
	}
	.zhichu{
		background-color: lightgreen;
	}
	.zhichu .van-card__price-integer{
		color: red;
	}
	.zhichu  .van-card__price-currency{
		color: red;
	}
	.zhichu .van-card__price-decimal{
		color: red;
	}
	.shouru{
		background-color: lightgreen;
	}
	.shouru .van-card__price-integer{
		color: blue;
	}
	.shouru  .van-card__price-currency{
		color: blue;
	}
	.shouru .van-card__price-decimal{
		color: blue;
	}
</style>
